
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Insert title here</title>
<script type="text/javascript">

var info=[
    ['奥利奥',"夹心饼"],
    ['农夫山泉'      ,"550ml"],
    ['维他柠檬'       ,"罐装" ],
    ['阿尔卑斯'     , "棒棒糖"],
    ['加多宝'       , "310ml"],
    ['脉动'         ,""],
    ['柠檬茶'     , "柠檬茶"],
    ['谢谢参与',"加油"]
];
var len = info.length;
var color=[];
var step = 2*Math.PI/len;
var outerR = 150; //轮盘的大小
var interR = 50;//内存空白圆的大小

window.onload=function() {
      var canvas = document.getElementById("canvas");
      var context = canvas.getContext("2d");
      context.translate(250,250);
      init(context);
};

function init(context){

    var fun = function ( c,color, arc ) {
        c.fillStyle = color;
        c.beginPath();
        c.moveTo(0,0)
        c.arc.apply( c, arc );
        c.closePath();
        c.fill();
    }
    var fun2 = function ( c, color, font, text, pp) {
        c.beginPath();
        c.moveTo(0,0)
        c.fillStyle= color;
        c.font= font;
        c.textAlign="center";
        c.textBaseline="middle";
        c.rotate( Math.PI / 180 * 45 * 7 );
        c.fillText( text ,0, pp );
        c.closePath();
        c.fill();
    }

    fun(context,"#333030",[0,0,outerR,0,2*Math.PI])
    var index = len;
    var py = Math.PI / 180 * 22.5 * -3;
    while ( index-- ) {

        fun(context,
           index % 2 ? "#323131" : "#434343",
           [ 0,0, outerR, py + index*step, py + ( index + 1 ) *step ]
           );
        fun(context,
           index % 2 ? "#383737" : "#494949",
           [ 0,0, 80, py + -index*step, py + ( index + 1 ) *step ]
           )
        fun(context,
           index % 2 ? "#2b2828" : "#343232",
           [ 0,0, 55, py + -index*step, py + ( index + 1 ) *step ]
           )
    }

    fun(context,"#333030",[0,0,interR,0,2*Math.PI])

    index = -1;
    while ( ++index< len ) {
        fun2( context, "#c8ad2f", "18px 微软雅黑", info[index][0], -120 )
    }
    index = -1;
    while ( ++index< len ) {
        fun2( context, "#e5d1b4", "12px 微软雅黑", info[index][1], -100 )
    }
}

</script>

<style type="text/css">
    #canvas{
        /*transform : rotate( 100 deg) ;*/
        transition: 5s;
        
    }
</style>
</head>
<body>
    
<div style="width:500px;margin:30px auto 0 auto;text-align:center;overflow: hidden;">

    <canvas id="canvas" width="500px" height="500px"></canvas>
    <button id="btn" style="margin-top:20px;">抽奖</button>

</div>
     
</body>
</html>